<template>
	<view>
		<!-- 视屏 -->
		<view class="video" v-if="curriculumDetail.curriculumType == 1">
			<video style="width: 100%; height: 100%;"
				:src="videoUrl+curriculumDetail.curriculumVideo"
				controls
			></video>
		</view>
		
		<!-- 图文 -->
		<view class="rich-text" v-if="curriculumDetail.curriculumType == 2">
			<u-parse :content="curriculumDetail.curriculumContent"></u-parse>
		</view>
		
		<!-- 课后自我检测 -->
		<view class="exerciseBg">
			<view class="exerciseMark">课后自我检测</view>
			<!-- 习题 -->
			<view>
				<exam-widght
				:dataList='questionList' 
				>
				</exam-widght>
			</view>
		</view>
		
	</view>
</template>

<script>
import examWidght from '@/components/Li-ExamWidght/Li-ExamWidght.vue';
import * as courseApi from '@/common/apis/course-api.js';
export default {
	components: {
		examWidght
	},
	data() {
		return {
			chapterId: '',
			chapterName: '',
			curriculumDetail: {},
			videoUrl: this.examBaseImageUrl,
			questionList: [],
			courseInfo : {}
			
		};
	},
	async onLoad(op) {
		this.chapterId = op.chapterId;
		this.chapterName = op.chapterName;
		this.courseInfo = getApp().globalData.courseInfo;
		
	  await this.getCourseBrowse();
	  await this.getChapterDetail();
	},
	
	onUnload() {
		this.getCourseDuration();
	},
	
	methods: {
		
		getChapterDetail() {
			courseApi.curriculumDetail({
					id: this.chapterId
				})
				.then(res => {
					this.curriculumDetail = res;
					var questionList=res.questions;
					for (var question of questionList) {
						//创建答题选项对象
						let {optA, optB, optC, optD} = {
							optA : {
								'fldOptionText' : question.optionA,
								'fldOptionIndex' : 1
							},
							optB : {
								'optionID' : question.id+'B',
								'fldOptionText' : question.optionB,
								'fldOptionIndex' : 2
							},
							optC : {
								'fldOptionText' : question.optionC,
								'fldOptionIndex' : 3
							},
							optD : {
								'fldOptionText' : question.optionD,
								'fldOptionIndex' : 4
							},
						}
						
						//重组答题选项list
						question.questionID =  question.id;
						question.fldName = question.questionsContent;
						question.fldAnswer = null;
						question.questionType = 0;
						question.QuestionOptionList =  [optA, optB, optC, optD];
					}
					this.questionList = questionList
				});
		},
		
		//记录开始学习专栏浏览
		getCourseBrowse() {
			courseApi.courseBrowse({
				courseId : this.courseInfo.id,
				courseName : this.courseInfo.courseName,
				courseRemark : this.courseInfo.courseRemark,
				coverUrl : this.courseInfo.coverUrl,
				curriculumId : this.chapterId,
				curriculumName : this.chapterName
			}).then(res => {
				
			})
		},
		
		//记录结束学习专栏浏览
		getCourseDuration() {
			courseApi.courseDuration({
				courseId : this.courseInfo.id,
				courseName : this.courseInfo.courseName,
				subjectId : this.courseInfo.subjectId,
				subjectName : this.courseInfo.subjectName,
				curriculumId : this.chapterId,
				curriculumName : this.chapterName
			}).then(res => {
				
			})
		},
		
		
		selectItem(item) {
			console.log("-----selectItem------")
			console.log(item)
		},
			
		selectFinish(item) {
			console.log("-----selectFinish------")
			console.log(item)
			let index = item.newItem.index + 1;
		}
	}
};
</script>

<style lang="scss" scoped>

	.video {
		width: 640upx;
		height: 320upx;
		margin: 20upx;
		padding: 25upx;
		background-color: #fff;
		border-radius: 16upx;
	}
	.rich-text {
		margin: 20upx;
		background-color: #fff;
		padding: 20upx;
		border-radius: 16upx;
	}
	
	.exerciseBg {
		margin-left: 20upx;
		margin-right: 20upx;
		border-radius: 16upx;
		padding: 20upx;
		background-color: #fff;
	}
	.exerciseMark {
		width: 180upx;
		height: 68upx;
		line-height: 68upx;
		border: 2upx solid #bbbbbb;
		border-radius: 6upx;
		color: #333;
		text-align: center;
		align-self: center;
	}
	.finishRemark {
		background-color: #F1F1F1;
		border-radius: 10upx;
		padding: 20upx;
	}
</style>
